<!-- 表行 》 操作 》 按钮 -->

<template>
  <span>
    <el-button
      v-for="item in btnList"
      :key="item"
      :size="parentWeb.size"
      :class="getClass(item)"
      :disabled="!CORE.MAP[`CAN_${item.toUpperCase()}`]"
      type="text"
      @click.stop="toClick(item)"
    >
      <!-- 图片按钮 -->
      <img v-if="btn[`${item}Img`]" :src="btn[`${item}Img`]" />

      <!-- 图标按钮 -->
      <i v-else-if="btn[`${item}Icon`]" :class="btn[`${item}Icon`]" />

      <!-- 文字按钮 -->
      <span v-else>{{ btn[`${item}Text`] }}</span>
    </el-button>
  </span>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixPath from '../../../mixPath'
import mixRow from '../../mixRow'
import UTIL from '../UTIL'
import TitleBtn from '../../RowTitle/TitleBtn'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'OperateBtn',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixPath],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: {
    ...CORE.WEB.RowCommon,
    ...CORE.WEB.RowOperate,
    row: { type: Object, required: true }, // 行数据
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 父级的 Web 组件
     */
    parentWeb: mixRow.computed.parentWeb,

    /**
     * 模块路径
     */
    path: mixRow.computed.path,

    /**
     * 绑定值
     */
    value: TitleBtn.computed.value,

    /**
     * 按钮列表
     */
    btnList() {
      const { btns, row, value } = this
      const btnList = []
      const config = CORE.isFunction(btns) ? btns(row) : btns
      if (CORE.isArray(config)) btnList.push(...config)
      if (CORE.isJSON(config) && CORE.isArray(config[value])) btnList.push(...config[value])
      return btnList.filter((item) => CORE.MAP[`HAS_${item.toUpperCase()}`])
    },

    /**
     * 按钮配置
     */
    btn() {
      const { state: { MAP = {} }, route, submit, show, edit, del, pass, rej } = this

      return {
        routeImg: UTIL.getImg(route),
        routeIcon: UTIL.getIcon(route),
        routeText: route,

        submitImg: UTIL.getImg(submit),
        submitIcon: UTIL.getIcon(submit),
        submitText: submit || MAP.SUBMIT || CORE.MAP.TIP_SUBMIT,

        showImg: UTIL.getImg(show),
        showIcon: UTIL.getIcon(show),
        showText: show || MAP.SHOW || CORE.MAP.TIP_SHOW,

        editImg: UTIL.getImg(edit),
        editIcon: UTIL.getIcon(edit),
        editText: edit || MAP.EDIT || CORE.MAP.TIP_EDIT,

        delImg: UTIL.getImg(del),
        delIcon: UTIL.getIcon(del),
        delText: del || MAP.DEL || CORE.MAP.TIP_DEL,

        passImg: UTIL.getImg(pass),
        passIcon: UTIL.getIcon(pass),
        passText: pass || MAP.PASS || CORE.MAP.TIP_PASS,

        rejImg: UTIL.getImg(rej),
        rejIcon: UTIL.getIcon(rej),
        rejText: rej || MAP.REJ || CORE.MAP.TIP_REJ,
      }
    },

    /**
     * 路由路径
     */
    routePath() {
      const { to, row } = this
      return UTIL.getRoutePath(to, row)
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取绑定值
     */
    getValue: TitleBtn.methods.getValue,

    /**
     * 点击
     */
    toClick(type) {
      const { $router, routePath, row, newOne, commit } = this
      const mid = newOne && ['show', 'edit'].includes(type) ? 'NewOne' : ''
      const Type = CORE.keyPre(type)

      // 优先使用 onXxx() 方法，未配置则使用默认的跳转或打开弹窗
      if (this[`on${Type}`]) this[`on${Type}`](row)
      else if (type === 'route') $router.push(routePath)
      else commit(`open${mid}${Type}`, row)
    },

    /**
     * 获取按钮状态类
     */
    getClass(type) {
      const redStr = ['del', 'rej'].includes(type) ? ' CoreWeb-BtnText-red' : ''
      return `CoreWeb-RowOperate-${type}${redStr}`
    },
  },
}
</script>
